<template>
    <div>
        <el-card>
            <el-form :model="queryForm" :inline='true'>
                <el-form-item label="用户名">
                    <el-input type="text" v-model="queryForm.username" size="small"></el-input>
                </el-form-item>
                <el-form-item label="昵 称">
                    <el-input type="text" v-model="queryForm.nickname" size="small"></el-input>
                </el-form-item>
                <el-form-item label="年 龄">
                    <el-input type="text" v-model="queryForm.age" size="small"></el-input>
                </el-form-item>
                <el-form-item label="手 机">
                    <el-input type="text" v-model="queryForm.mobile" size="small"></el-input>
                </el-form-item>
                <el-form-item label="性 别">
                    <el-select v-model="queryForm.sex" size="small">
                        <el-option v-for="(item,index) in sexList" :key="'sex-'+index" :value="item" :label="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button size="size" type="primary" @click="handleSearch">搜索</el-button>
                    <el-button size="size" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <el-card class="mt12">
            <div class="handel-btns">
                <div class="left-btns">
                </div>
                <div class="right-btns">
                    <el-button size="small" icon="el-icon-refresh" circle @click="getList"></el-button>
                </div>
            </div>
            <el-table :data="userList" style="wdith:100%" border class="mt12">
                <el-table-column prop="id" label="ID" width="60px"></el-table-column>
                <el-table-column prop="avatarPath" label="头 像" width="90px" align="center">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.avatarPath" alt="" style="width: 150px;height: 150px">
                            <img slot="reference" :src="scope.row.avatarPath" style="width: 60px;height: 60px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="nickname" label="昵 称"></el-table-column>
                <el-table-column prop="sex" label="性 别"></el-table-column>
                <el-table-column prop="age" label="年 龄"></el-table-column>
                <el-table-column prop="mobile" label="手 机"></el-table-column>
                <el-table-column prop="send" sortable label="发布数量" width="120px"></el-table-column>
                <el-table-column prop="liked" sortable label="获赞数量" width="120px"></el-table-column>
                <el-table-column prop="concern" sortable label="关注数量" width="120px"></el-table-column>
                <el-table-column prop="fans" sortable label="粉丝数量" width="120px"></el-table-column>
            </el-table>
            <el-pagination
            :current-page="queryForm.pageNo" 
            :page-size="queryForm.pageSize"
            :total="total"
            :page-sizes="[10,20,50,100]"
            layout="total,sizes,prev,pager,next"
            @current-change='handleCurrentChange'
            @size-change='handleSizeChange'>
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    import {listUser} from '@/api/User'
    export default {
        name:'UserData',
        data(){
            return{
                total:120,
                queryForm:{
                    pageNum:1,
                    pageSize:10,
                    orderByColumn:'id',
                    isAsc:'desc'
                },
                sexList:['男','女','保密'],
                selectList:[],
                userList:[]
            }
        },
        created(){
            this.getList()
        },
        methods:{
            handleReset(){
                this.queryForm = {
                    pageNum:1,
                    pageSize:10
                }
                this.getList()
            },
            handleSearch(){
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleSizeChange(pageSize){
                this.queryForm.pageSize = pageSize
                this.queryForm.pageNum = 1
                this.getList()
            },
            handleCurrentChange(pageNum){
                this.queryForm.pageNum = pageNum
                this.getList()
            },
            getList(){
                listUser(this.queryForm).then(res=>{
                    this.userList = res.data.records
                    for(var i=0;i < this.userList.length;i++){
                        this.userList[i].avatarPath = require("../../assets" + this.userList[i].avatarPath.split("../../static")[1])
                    }
                    this.total = res.data.total
                }).catch(err=>{console.log(err)})
            }
        }
    }
</script>

<style  scoped>
    .el-form-item{
        margin: 10px 30px;
    }
    .handel-btns{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .el-link{
        margin: 0 5px;
        font-size: 12px;
    }
</style>